<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
        content="width=device-width, initial-scale=1.0">
<meta name="HandheldFriendly" content="true">
<title>Sample</title>
</head>
<body>
<a href="#">超链接1</a>
<a href="#">超链接2</a>
<script type="text/javascript">
/*
 * 检测HTMLDOM是否已经准备好
 * 这个检测方法也是jQuery库源代码中所使用的原理
*/
var isDOMready = false;

// 此时如果HTMLDOM已经加载并绘制完毕，那么就执行DOM操作
if ("complete"==document.readyState)
{
   isDOMready = true;
   handleDOM();
} else
// 如果HTMLDOM没有准备好，那么就使用事件监听
{
   if (document.addEventListener) {
      document.addEventListener("DOMContentLoaded", handleDOM,
                                     false);
      window.addEventListener("load", handleDOM, false);
   // 旧版IE使用attachEvent方法定义监听
   } else if (document.attachEvent) {
      document.attachEvent("onreadystatechange", handleDOM);
      window.attachEvent("onload", handleDOM);	
   }
}

// 执行DOM操作
function handleDOM()
{
   // 首先移除监听，并设置isDOMready = true
   if (document.addEventListener) {
      document.removeEventListener("DOMContentLoaded", handleDOM,
                                         false);
	  isDOMready = true;
   } else if (document.attachEvent) {
      if (document.readyState == "complete") {
         document.detachEvent("onreadystatechange", handleDOM);
		 window.detachEvent("onload", handleDOM);
         isDOMready = true;
	  }
   }

   // 检测HTMLDOM，如果准备好就获取所有a元素，并为每个a元素注册click事件
   if (isDOMready){
      var nodeList = document.getElementsByTagName("a");
	  var len = nodeList.length;
      for (var i=0;i<len;i++){
        addEventListener(nodeList.item(i), "click", a_click);
      }
   }
}

// 定义一个函数用于处理a元素click事件
function a_click()
{
	alert("嗨！你点击了一个超链接！");
}

// 定义一个实现浏览器兼容的事件注册函数
function addEventListener(element, eventType, listener)
{
	try
	{
		if (element.addEventListener)
			element.addEventListener(eventType, listener, false);
		else if (element.attachEvent)
			element.attachEvent("on" + eventType, listener);
	} catch (e) {}
}
</script>
</body>
</html>
